<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LAN Chat Room - Home</title>
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/homepage.css">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
    <!-- App Container -->
    <div id="app">
        <!-- Loading Screen -->
        <div id="loading-screen" class="loading-screen">
            <div class="loading-spinner"></div>
            <p>Loading...</p>
        </div>

        <!-- Error Display -->
        <div id="error-display" class="error-display hidden">
            <div class="error-content">
                <h3>Error</h3>
                <p id="error-message"></p>
                <button id="error-close" class="btn btn-secondary">Close</button>
            </div>
        </div>

        <!-- Home Page -->
        <div id="home-page" class="page hidden">
            <div class="container">
                <header class="header">
                    <h1>🗨️ LAN Chat Room</h1>
                    <p class="subtitle">Connect with others on your local network</p>
                </header>

                <div class="content">
                    <div class="card-grid">
                        <!-- Create Room Card -->
                        <div class="card">
                            <h2>Create New Room</h2>
                            <form id="create-room-form">
                                <div class="form-group">
                                    <label for="room-name">Room Name</label>
                                    <input type="text" id="room-name" name="roomName" required 
                                           placeholder="Enter room name" maxlength="50">
                                </div>
                                <div class="form-group">
                                    <label for="creator-nickname">Your Nickname</label>
                                    <input type="text" id="creator-nickname" name="creatorNickname" required 
                                           placeholder="Enter your nickname" maxlength="30">
                                </div>
                                <div class="form-group">
                                    <label for="room-password">Password (Optional)</label>
                                    <input type="password" id="room-password" name="password" 
                                           placeholder="Leave empty for public room">
                                </div>
                                <div class="form-group">
                                    <label for="max-users">Max Users</label>
                                    <select id="max-users" name="maxUsers">
                                        <option value="10">10 users</option>
                                        <option value="25">25 users</option>
                                        <option value="50" selected>50 users</option>
                                        <option value="100">100 users</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-primary">Create Room</button>
                            </form>
                        </div>

                        <!-- Join Room Card -->
                        <div class="card">
                            <h2>Join Existing Room</h2>
                            <form id="join-room-form">
                                <div class="form-group">
                                    <label for="join-room-id">Room ID</label>
                                    <input type="text" id="join-room-id" name="roomId" required 
                                           placeholder="Enter room ID">
                                </div>
                                <div class="form-group">
                                    <label for="join-nickname">Your Nickname</label>
                                    <input type="text" id="join-nickname" name="nickname" required 
                                           placeholder="Enter your nickname" maxlength="30">
                                </div>
                                <div class="form-group">
                                    <label for="join-password">Password (if required)</label>
                                    <input type="password" id="join-password" name="password" 
                                           placeholder="Enter room password">
                                </div>
                                <button type="submit" class="btn btn-primary">Join Room</button>
                            </form>
                        </div>
                    </div>
                </div>

                <footer class="footer">
                    <p>Share invite links to let others join your rooms easily!</p>
                </footer>
            </div>
        </div>

        <!-- Join Invite Page -->
        <div id="join-invite-page" class="page hidden">
            <div class="container">
                <header class="header">
                    <h1>Join Room via Invite</h1>
                </header>

                <div class="content">
                    <div class="card invite-card">
                        <div id="invite-info">
                            <h2 id="invite-room-name">Room Name</h2>
                            <p class="room-details">
                                <span id="invite-member-count">0</span> members • 
                                <span id="invite-max-users">50</span> max
                            </p>
                        </div>

                        <form id="invite-join-form">
                            <div class="form-group">
                                <label for="invite-nickname">Your Nickname</label>
                                <input type="text" id="invite-nickname" name="nickname" required 
                                       placeholder="Enter your nickname" maxlength="30">
                            </div>
                            <div id="invite-password-group" class="form-group hidden">
                                <label for="invite-password">Room Password</label>
                                <input type="password" id="invite-password" name="password" 
                                       placeholder="Enter room password">
                            </div>
                            <div class="button-group">
                                <button type="submit" class="btn btn-primary">Join Room</button>
                                <button type="button" id="invite-cancel" class="btn btn-secondary">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <!-- JavaScript Files -->
    <script type="module" src="/js/common/storage.js"></script>
    <script type="module" src="/js/common/utils.js"></script>
    <script type="module" src="/js/common/api.js"></script>
    <script type="module" src="/js/homepage/app.js"></script>
</body>
</html>